CSS动画相关属性

transform

transform 可以用来设置元素的形状改变，主要有以下几种变形：

1. rotate()：旋转，括号内值为旋转角度
2. scale(x,y)：缩放，括号内值为缩放倍数
3. skew()：扭曲，括号内值为扭曲角度
4. translate(x,y)：移动
5. matrix：矩阵变形，涉及矩阵运算

transform-origin：基点，默认为元素的中心点

transition

transition 用来设置样式的属性值是如何从一种状态过渡到另一种状态，有四个子属性

1. transition-property：设置哪些属性会有过渡的效果
   • all
   • none
   • color
   • ...
2. transition-duration：设置转换过程的持续时间，单位是 s 或 ms，默认为0
3. transition-timing-function：设置过渡效果的速率，有6种形式的速率
   • ease：逐渐变慢，默认值
   • linear：匀速
   • ease-in：加速
   • ease-out：减速
   • ease-in-out：先加速后减速
   • cubic-bezier：自定义贝塞尔曲线
4. transition-delay：设置过渡动画开始执行的时间，单位是 s 或 ms，默认为0

animation

animation 类似于 flash 中的逐帧动画，在 CSS3 中由 @keyframes 来完成逐帧动画，有7个子属性

1. animation-name：设置动画的名称，可以同时设置多个动画名称，用逗号隔开
2. animation-duration：设置动画的持续时间，单位为 s，默认为0
3. animation-timing-function：设置动画的速率，类似 transition-timing-function
4. animation-delay：设置动画开始的时间，单位是 s 或 ms，默认为0
5. animation-iteration-count：设置动画循环的次数，默认为1，infinite 为无限循环
6. animation-direction：设置动画播放的方向
7. animation-play-state：控制动画的播放状态
   • running：播放，默认值
   • paused：暂停

@keyframes

@keyframes animationName {
    from {
        properties: value;
    }
    percentage {
        properties: value;
    }
    to {
        properties: value;
    }
}

• animationName：动画名称，开发人员自己命名
• percentage：为百分比值，可以添加多个百分比值
• properties：样式属性名称，例如：color、left、width等